<template>
    <div class="voluteerActivity">
        <VHeader title='我的点单管理' />
        <van-tabs
            v-model="tabActive" 
            background='#fff'
            title-active-color='#F65D5D'
            line-height='1'
            sticky
            @change='changeTabs'
            >
            <van-tab v-for='(el,index) in tabBar' :key='index' :title="el.title">
               
            </van-tab>
             
        </van-tabs>
        <div>
            <van-search placeholder="" v-model="searchValue" show-action>
                <div slot='action' class='search' @click="getData(true)">搜索</div>
            </van-search>
        </div>
        
        <div class="list-wrap">
            <van-list
                    v-if="list.length > 0"
                v-model="listLoadingFlag"
                :finished="listLoadingFinished"
                @load="getData"
                :immediate-check='false'
            >
                <div v-for="(el,index) in list" :key="index">
                    <activityItem @init="changeTabs" :activityData='el' @click="comment" />
                </div>
            </van-list>
            <div v-else class="flex flex-center flex-align-center no-more">
                <div>
                    <img src="../../../static/img/no_data.png" width="150" />
                    <p style="text-align: center">没有更多数据</p>
                </div>
            </div>
        </div>
        <van-popup
                v-model="show"
                position="bottom"
                :style="{ height: '340px' }"
        >
            <div class="popup">
                <div class="flex flex-align-center title">
                    <div><img src="../../../static/img/ucenter/icon_pj@2x.png" width="22" /></div>
                    <div class="ml10">我要点单评价</div>
                </div>
                <div class="flex flex-align-center radio">
                    <div>评价主题：</div>
                    <div>
                        <input type="radio" name="type" value="0" :checked="form.type === '0'" /> <span class="type0-text">我要点赞</span>
                        <span class="ml10"><input type="radio" name="type" value="1" :checked="form.type === '1'" /> <span class="type1-text">我要投诉</span></span>
                    </div>
                </div>
                <div class="flex content">
                    <div>评价内容：</div>
                    <div style="flex-grow: 1">
                        <textarea v-model="form.contents" rows="8" />
                    </div>
                </div>
                <div class="flex flex-center buttons">
                    <button class="submit-button" @click="submitComment">提交评价</button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import activityItem from './myRecordCommentItem'
export default {
    data() {
        return {
            tabActive:0,
            tabBar:[
                {title:'待评价点单'},
                {title:'已评价点单'},
            ],
            listLoadingFlag:false,
            listLoadingFinished:false,
            loadingFlag:true,
            searchValue:'',
            pageSize:10,
            page:1,
            list:[],
            show: false,
            form: {
                id: 0,
                type: '0',
                contents: '',
            }
        }
    },
    components:{
        activityItem,
    },
    created() {
        this.getData(true)
    },
    methods: {
        listLoadingOnLoad(){

        },
        async getData(flag){
            if(!this.loadingFlag){return}
            this.listLoadingFlag = false;
            this.loadingFlag=false
            let res=await this.$http({
                method:'api.diandan.comments',
                page:flag ? 1 : this.page++,
                pageSize:this.pageSize,
                status:this.tabActive + 3,
                contents: this.searchValue,
            })
            this.list=flag?res.data.list:[...res.data.list,...this.list]
            this.listLoadingFinished=(res.data.list.length<this.pageSize)
            this.loadingFlag=true
        },
        changeTabs(){
            this.page=1;
            this.getData(true)
        },
        comment(id){
            this.form.id = id;
            this.show = true;
        },
        async submitComment(){
            await this.$http({
                ...this.form,
                method: 'api.diandan.submitComment',
            })
            this.show = false;
            this.getData(true);
        }
    },
}
</script>

<style lang='scss' scoped >
.search{color: #F65D5D;}
.search-wrap{margin:.5rem 0;}
.list-wrap{padding: 0 .4rem}
.voluteerActivity{padding-bottom: 50px;}
    .popup {
        font-size: 14px;
        .title {
            background:#F5F5F5;
            padding: 0.2rem 0.4rem;
        }
        .radio {
            padding: 0.4rem 0.4rem 0.2rem;
        }
        .type0-text{
            color: #F3A841;
        }
        .type1-text{
            color: #5C97E9;
        }
        .content {
            padding: 0.3rem 0.4rem;
            textarea {
                width: 100%;
                border: 1px solid #e3e3e3;
            }
        }
        .buttons {
            .submit-button {
                border:0;
                font-size: 140%;
                padding: 0.14rem;
                width: 70%;
                background:#F65D5D;
                border-radius: 4px;
                color:#FFF;
            }
        }
    }
</style>